<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" href="css/bootstrap.css">
    <script src="js/jquery.min.js"></script>
    <script src="js/bootstrap.js"></script>
    <script src="js/sockjs.js"></script>
    <script src="js/stomp.js"></script>
    <title></title>
    <style>
        .bgcr{
            background-color: red;
        }
        html, body {
            width: 100%;
            height: 100%;
            overflow: hidden;
            font-family: "Microsoft YaHei", "Microsoft JhengHei", "NSimSun", "PMingLiU", "DFKai-SB", "KaiTi";
        }

        .warp {
            background-color: #F0F0F0;
            padding-top: 20px;
            padding-bottom: 20px;
            width: 100%;
            height: 100%;
        }

        .tab-pane {
            background-color: white;
            min-height: 500px !important;
            max-height: 500px !important;
            margin-top: 2px;
        }

        .show-date {
            padding: 4px;
            border: silver solid 1px;
            border-radius: 2%;
        }

        fieldset {
            padding: 0px 30px 35px 30px;
            margin: 0 2px;
            border: 1px solid silver;
            border-radius: 1%;
        }

        legend {
            padding: .5em;
            border: 0;
            width: auto;
        }

        .th-last {
            width: 12px;
            background-color: #F0F0F0;
            border: none;
        }

        thead, tbody tr {
            display: table;
            width: 100%;
            table-layout: fixed;
            cursor: pointer;
        }

        tbody {
            display: block;
            height: 460px;
            overflow-y: scroll;
        }

        .fb {
            font-weight: bold;
        }

        #disconnect {
            display: none;
            position: fixed;
            left: 0;
            right: 0;
            top: 0;
            bottom: 0;
            z-index: 9999;
            background-color: rgba(0, 0, 0, .5);

        }

        #disconnect h3 {
            position: absolute;
            width: 300px;
            height: 150px;
            line-height: 150px;
            color: red;
            background-color: #f5f5f5;
            border-radius: 10px;
            text-align: center;
            left: 0;
            right: 0;
            bottom: 0;
            top: 0;
            margin: auto;
        }
    </style>
</head>
<body>
<div id="disconnect">
    <h3>网络异常 ......</h3>
</div>
<div class="container-fluid warp">

    <div class="col-xs-8 col-sm-8 col-md-8 col-lg-8">
        <div class="row" style="font-size: 20px;font-weight: bold;margin: 0 0 17px 1px;">当前客户端所在检查室： <span
                id="nowCheckRoom"></span></div>
        <div class="row">
            <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
                检查室: <select class="selectpicker show-tick" id="consultationRoom"></select>
            </div>
            <div class="form-group col-xs-7 col-sm-7 col-md-7 col-lg-7">
                <input type="text" id="search" class="form-control" placeholder="请输入患者的队列号、或姓名筛选记录">
            </div>
            <div class="col-xs-1 col-sm-1 col-md-1 col-lg-1">
                <button type="button" id="btnSearch" style="float: right;" class="btn btn-info">查询</button>
            </div>
        </div>

        <div class="row" style="padding:14px">

            <!-- Nav tabs -->
            <ul class="nav nav-tabs" role="tablist">
                <li role="presentation" class="active" data-index="0">
                    <a href="#waitingCall" aria-controls="waitingCall" role="tab" data-toggle="tab">待呼</a>
                </li>
                <li role="presentation" data-index="1">
                    <a href="#overNumber" aria-controls="overNumber" role="tab" data-toggle="tab">过号</a>
                </li>
                <li role="presentation" data-index="2">
                    <a href="#called" aria-controls="called" role="tab" data-toggle="tab">已检</a>
                </li>
            </ul>

            <!-- Tab panes -->
            <div class="tab-content">
                <div role="tabpanel" class="tab-pane active" id="waitingCall">
                    <table class="table table-bordered ">
                        <thead>
                        <tr>
                            <th style="width: 100px;">排队号</th>
                            <th style="width: 100px;">患者姓名</th>
                            <th style="width: 50px;">性别</th>
                            <th style="width: 60px;">年龄</th>
                            <th style="width: 180px;">登记时间</th>
                            <th>检查部位</th>
                            <th>检查项目</th>
                            <th style="width: 80px;">病人来源</th>
                            <th style="width: 100px;">检查状态</th>

                            <th class="th-last"></th>
                        </tr>
                        </thead>
                        <tbody id="waitTable" class="tbody">
                        </tbody>
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="overNumber">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th style="width: 100px;">排队号</th>
                            <th style="width: 100px;">患者姓名</th>
                            <th style="width: 50px;">性别</th>
                            <th style="width: 60px;">年龄</th>
                            <th style="width: 180px;">登记时间</th>
                            <th>检查部位</th>
                            <th>检查项目</th>
                            <th style="width: 80px;">病人来源</th>
                            <th style="width: 100px;">检查状态</th>

                            <th class="th-last"></th>
                        </tr>
                        </thead>
                        <tbody id="overTable" class="tbody">
                        </tbody>
                    </table>
                </div>
                <div role="tabpanel" class="tab-pane" id="called">
                    <table class="table table-bordered table-hover">
                        <thead>
                        <tr>
                            <th style="width: 100px;">排队号</th>
                            <th style="width: 100px;">患者姓名</th>
                            <th style="width: 50px;">性别</th>
                            <th style="width: 60px;">年龄</th>
                            <th style="width: 180px;">登记时间</th>
                            <th>检查部位</th>
                            <th>检查项目</th>
                            <th style="width: 80px;">病人来源</th>
                            <th style="width: 100px;">检查状态</th>
                            <!--<th>确诊时间</th>-->

                            <th class="th-last"></th>
                        </tr>
                        </thead>
                        <tbody id="calledTable" class="tbody">
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>
    <div class="col-xs-4 col-sm-4 col-md-4 col-lg-4">
        <div class="row text-center show-date">
            <h4 id="year"></h4>
            <h4><span id="week"></span><span style="margin-left: 10px;" id="hour"></span></h4>
        </div>
        <div class="row">
            <fieldset class="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <legend><h4><strong>当前呼叫患者</strong></h4></legend>
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="queueId" class="control-label" style="float: left;margin-left: 26px;">队列号:</label>
                        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="width: calc(100% - 45px - 40px );">
                            <label id="queueId" class=" control-label"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="patientName"
                               class="control-label" style="float: left;margin-left: 26px;">患　者:</label>
                        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="width: calc(100% - 45px - 40px );">
                            <label id="patientName" class=" control-label" style="color:red;"></label>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="checkStatus"
                               class=" control-label" style="float: left;margin-left: 26px;">状　态:</label>
                        <div class="col-xs-9 col-sm-9 col-md-9 col-lg-9" style="width: calc(100% - 45px - 40px );">
                            <label id="checkStatus" class=" control-label"></label>
                        </div>
                    </div>
                </form>
            </fieldset>
        </div>
        <span id="waitPersonNumber" style="display: none">当前等待人数：</span>

        <div class="row">
            <fieldset>
                <legend><h4><strong>呼叫操作</strong></h4></legend>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 20px;">
                    <button id="call" class="btn btn-success col-xs-12 col-sm-12 col-md-12 col-lg-12"
                            style="height: 100px;font-size: 60px">呼号
                    </button>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 20px;">
                    <button id="finish" class="btn btn-primary col-xs-12 col-sm-12 col-md-12 col-lg-12"
                            style="height: 100px;font-size:60px">检查完毕
                    </button>
                </div>
                <div class="col-xs-12 col-sm-12 col-md-12 col-lg-12" style="margin-bottom: 20px;">
                    <button id="over" class="btn btn-warning col-xs-12 col-sm-12 col-md-12 col-lg-12"
                            style="height: 100px;font-size: 60px">过号
                    </button>
                </div>
            </fieldset>
        </div>
    </div>
</div>
<script>
    //全局设置
    //禁用右键菜单,禁用网页上选取的内容,禁用复制
    document.oncontextmenu = function () {
        return false;
    };
    document.onselectstart = function () {
        return false;
    };
    document.oncopy = function () {
        return false;
    };
    //禁用键盘中的ctrl、alt、shift
    document.onkeydown = function () {
        if (event.ctrlKey) {
            return false;
        }
        if (event.altKey) {
            return false;
        }
        if (event.shiftKey) {
            return false;
        }
    };

    /**
     * 捕获异常
     */
    window.onerror = function () {
        alert(arguments[0]);
        // 阻止在控制台中打印错误信息
        return true;
    };
    var timerDao = '';
    //默认显示的表格标志(未呼)
    var checkRoomIndex = "0";

    //默认显示的诊室信息id
    var InitCheckRoom = "门诊部放射一室";
    //使用的诊室的id
    var userCheckRoomId;
    //设置该科室的最后封装的数据(从客户端读取)
    var data = {
        clientName: "",
        checkRoomId: "",
        deptId: "所属科室ID",
        clientId: "客户端ID（UUID）",
        clientType: "客户端类型（1-显示客户端）"
    };
    //显示时间
    setInterval(function () {
        var time = new Date();
        var year = time.getFullYear();
        var month = parseInt(time.getMonth()) + 1;
        month = month < 10 ? '0' + month : month;
        var date = time.getDate();
        date = date < 10 ? '0' + date : date;
        var hour = time.getHours();
        hour = hour < 10 ? '0' + hour : hour;
        var second = time.getSeconds();
        second = second < 10 ? '0' + second : second;
        var minute = time.getMinutes();
        minute = minute < 10 ? '0' + minute : minute;
        var day = this.showDay(parseInt(time.getDay()));

        $("#year").html(year + '年' + month + '月' + date + '日');
        $("#week").html(day);
        $("#hour").html(hour + ':' + minute + ':' + second)
    }, 1000);

    function showDay(week) {
        if (week === 0) {
            return "星期天";
        } else if (week === 1) {
            return "星期一";
        } else if (week === 2) {
            return "星期二";
        } else if (week === 3) {
            return "星期三";
        } else if (week === 4) {
            return "星期四";
        } else if (week === 5) {
            return "星期五";
        } else if (week === 6) {
            return "星期六";
        }
    }

    /**
     * 读取配置信息
     */
    $(document).ready(function () {
        //定时执行，2秒后执行
        var t1 = window.setTimeout(refreshCount, 1000 * 3);

        function refreshCount() {
            // 获取配置文件信息
            getClientProperties();
            //去掉定时器
            window.clearTimeout(t1);
        }
    });

    // 获取配置文件信息
    function getClientProperties() {
        var properties = app.getClientProperties();
        // var properties = '{"clientType":"1","clientId":"86e28557-dbe7-46b4-bf5c-174c4b038a00","clientName":"彩超一室","deptId":"外科楼超声","checkId":"彩超二室"}';
        var _properties = eval("(" + properties + ")");
        window.g_properties = _properties;
        //设置大屏显示的科室
        data.deptId = g_properties.deptId;
        data.clientName = g_properties.clientName;
        data.clientId = g_properties.clientId;
        data.clientType = g_properties.clientType;
        data.checkRoomId = g_properties.checkRoomId;
        userCheckRoomId = g_properties.checkRoomId;

        // 清除数据
        data.checkRoomDatas = [];
        //根据科室id获取所有的诊室消息
        $.ajax({
            url: "/sys/checkRoom/byDeptId?deptId=" + data.deptId,
            method: "GET",
            success: function (res) {
                // console.log("res");
                // console.log(res);
                var checkRooms = [];
                res.data.forEach(function (item) {
                    if (item.checkRoomId === userCheckRoomId) {
                        data.checkRoom = item.checkRoomName;
                        $("#nowCheckRoom").html(item.checkRoomName)
                    }
                    checkRooms.push(item);
                });

                // 封装数据

                for (var i = 0; i < checkRooms.length; i++) {
                    var obj = {};
                    obj.checkId = checkRooms[i].checkRoomId;
                    obj.checkRoomName = checkRooms[i].checkRoomName;
                    data.checkRoomDatas.push(obj);
                }

                //对科室的数据做格式化处理
                data.checkRoomDatas.forEach(function (item) {
                    item.dataAll = {};
                    //展示(未呼)数据
                    item.dataAll.showData = [];
                    //已呼数据
                    item.dataAll.callData = [];
                    //过号数据
                    item.dataAll.guoData = [];
                    //总的数据(包括:未呼，已呼，过号)
                    item.zongData = [];
                });
                //对科室的诊室下拉框进行处理
                for (var k = 0; k < data.checkRoomDatas.length; k++) {
                    var option;
                    if (data.checkRoomDatas[k].checkId === userCheckRoomId) {
                        option = "<option selected value=" + data.checkRoomDatas[k].checkId + ">" + data.checkRoomDatas[k].checkRoomName + "</option>";
                    }
                    else {
                        option = "<option  value=" + data.checkRoomDatas[k].checkId + ">" + data.checkRoomDatas[k].checkRoomName + "</option>";
                    }
                    $("#consultationRoom").append(option);


                }
                //重启或者打开客户端之前的获取数据
                getSomeData(userCheckRoomId);
            },
            error: function () {
                alert("请求科室下所有的诊室出错")
            }
        });


        //诊室下拉框选择之后,重新获取数据
        $("#consultationRoom").change(function () {
            userCheckRoomId = $(this).val();
            $("#queueId").html("");
            $("#patientName").html("");
            $("#checkStatus").html("");
            getSomeData(userCheckRoomId);
            stompClient.disconnect();
            initWebSocket();
        });

        initWebSocket();

    }

    function initWebSocket() {
        connection();
    }

    var socket;
    var stompClient;
    var timer;

    function connection() {

        // 建立连接对象
        socket = new SockJS('/zd-queuing-websocket');
        // var socket = new SockJS('/zd-queuing-websocket');
        // 获取STOMP子协议的客户端对象
        stompClient = Stomp.over(socket);

        //http://192.168.2.106:8080/zd-queuing-websocket
        // 向服务器发起websocket连接
        stompClient.connect({},
            function () {
                $("#disconnect").hide();
                if (timer) {
                    clearInterval(timer);
                }
                stompClient.subscribe('/newPatient/checkRoom/' + userCheckRoomId, function (msg) {
                    // console.log("new");
                    var datas = JSON.parse(msg.body);
                    data.checkRoomDatas.forEach(function (item1) {
                        if (item1.checkId === userCheckRoomId) {
                            if (item1.dataAll.showData.length === 0) {
                                item1.dataAll.showData = datas;
                            }
                            else {
                                datas.forEach(function (item2) {
                                    item1.dataAll.showData.push(item2)
                                })
                            }
                            // if(item1.dataAll.showData[0]){
                            //     showPerson(item1.dataAll.showData[0])
                            // }
                            htmlCanvas(item1);
                            if (checkRoomIndex === '0') {
                                $(".nav.nav-tabs li").eq(0).click();
                            }
                            if (checkRoomIndex === '1') {
                                $(".nav.nav-tabs li").eq(1).click();
                            }
                            if (checkRoomIndex === '2') {
                                $(".nav.nav-tabs li").eq(2).click();
                            }
                        }
                    })
                });
                stompClient.subscribe('/pass/checkRoom/' + userCheckRoomId, function (msg) {
                    // console.log("pass");
                    var queueId = msg.body;
                    if (queueId) {
                        //在待呼表格中删除对应的数据
                        data.checkRoomDatas.forEach(function (item1) {
                            if (item1.checkId === userCheckRoomId) {
                                item1.dataAll.showData.forEach(function (item2, index) {
                                    if (item2.queueId === queueId) {
                                        //把过号信息加入过号表格中去
                                        item1.dataAll.guoData.push(item2);
                                        //在待呼表格中删除对应的数据
                                        item1.dataAll.showData.splice(index, 1);
                                        // //向后台发送数据
                                        // myAjax(item2.departmentId, item2.checkId, item2.queueId, item2.inspectId, "pass");
                                        //改变当前患者的状态
                                        item2.checkStatus = 1;
                                        //重新渲染页面
                                        htmlCanvas(item1);
                                        //如果待呼表格中还存在数据,就显示第一条数据
                                        if (item1.dataAll.showData[0]) {
                                            $("#queueId").html(item1.dataAll.showData[0].queueId);
                                            $("#patientName").html(item1.dataAll.showData[0].patientName);
                                            $("#checkStatus").html(statusFilter(item1.dataAll.showData[0].checkStatus));
                                            $("#waitPersonNumber").html(item1.dataAll.showData[0].waitPersonNumber);
                                            //选中第一个,设置背景色
                                            $("#waitTable tr").eq(0).css("backgroundColor", "skyblue");
                                            jizheneCChangeColor($("#waitTable tr").eq(0).siblings());
                                        }
                                        else {
                                            $("#queueId").html('');
                                            $("#patientName").html('');
                                            $("#checkStatus").html('');
                                            $("#waitPersonNumber").html('');
                                        }
                                    }
                                })
                            }
                        });
                    }
                    else return false;
                });
                stompClient.subscribe('/finish/checkRoom/' + userCheckRoomId, function (msg) {
                    var queueId = msg.body;
                    if (queueId) {
                        data.checkRoomDatas.forEach(function (item1) {
                            if (item1.checkId === userCheckRoomId) {
                                item1.dataAll.showData.forEach(function (item2, index) {
                                    if (item2.queueId === queueId) {
                                        //把当前检查完毕信息加入已检查表格中去
                                        item1.dataAll.callData.push(item2);
                                        //在待呼表格中删除对应的数据
                                        item1.dataAll.showData.splice(index, 1);
                                        item2.checkStatus = 2;
                                        //重新渲染页面
                                        htmlCanvas(item1);
                                        // //向后台发送数据
                                        // myAjax(item2.departmentId, item2.checkId, item2.queueId, item2.inspectId, "finish");
                                        //如果待呼表格中还存在数据,就显示第一条数据
                                        if (item1.dataAll.showData[0]) {
                                            $("#queueId").html(item1.dataAll.showData[0].queueId);
                                            $("#patientName").html(item1.dataAll.showData[0].patientName);
                                            $("#checkStatus").html(statusFilter(item1.dataAll.showData[0].checkStatus));
                                            $("#waitPersonNumber").html(item1.dataAll.showData[0].waitPersonNumber);
                                            btnCallHtml(item1.dataAll.showData[0]);
                                            //选中第一个,设置背景色
                                            $("#waitTable tr").eq(0).css("backgroundColor", "skyblue");
                                            jizheneCChangeColor($("#waitTable tr").eq(0).siblings());
                                        }
                                        else {
                                            $("#queueId").html('');
                                            $("#patientName").html('');
                                            $("#checkStatus").html('');
                                            $("#waitPersonNumber").html('');
                                        }
                                    }
                                });
                                item1.dataAll.guoData.forEach(function (item2, index) {
                                    if (item2.queueId === queueId) {
                                        //把过号信息加入已检查表格中去
                                        item1.dataAll.callData.push(item2);
                                        //在待呼表格中删除对应的数据
                                        item1.dataAll.guoData.splice(index, 1);
                                        item2.checkStatus = 2;
                                        //重新渲染页面
                                        htmlCanvas(item1);
                                        //向后台发送数据
                                        myAjax(item2.departmentId, item2.checkRoomId, item2.queueId, item2.inspectId, "finish");
                                        //如果待呼表格中还存在数据,就显示第一条数据
                                        if (item1.dataAll.guoData[0]) {
                                            $("#queueId").html(item1.dataAll.guoData[0].queueId);
                                            $("#patientName").html(item1.dataAll.guoData[0].patientName);
                                            $("#checkStatus").html(statusFilter(item1.dataAll.showData[0].checkStatus));
                                            $("#waitPersonNumber").html(item1.dataAll.guoData[0].waitPersonNumber);
                                            btnCallHtml(item1.dataAll.guoData[0]);
                                        }
                                        else {
                                            $("#queueId").html('');
                                            $("#patientName").html('');
                                            $("#checkStatus").html('');
                                            $("#waitPersonNumber").html('');
                                        }
                                    }
                                })
                            }
                        });
                    }
                    else return false;
                });
                stompClient.subscribe('/zd-call/cleanCache', function () {
                    //清除每个诊室的数据集合
                    data.checkRoomDatas.forEach(function (t, index) {
                        t.dataAll.showData = [];
                        t.dataAll.guoData = [];
                        t.dataAll.callData = [];
                        htmlCanvas(t);
                    });
                    //清除具体患者的信息
                    $("#queueId").html('');
                    $("#checkStatus").html('');
                    $("#patientName").html('');

                });
            },
            function (err) {
                $("#disconnect").show();
                $("#waitTable").html('');
                $("#overTable").html('');
                $("#calledTable").html('');
                $("#queueId").html('');
                $("#checkStatus").html('');
                $("#patientName").html('');
                $("#waitPersonNumber").html('');
                timer = setInterval(function () {
                    window.location.reload();
                }, 2000)
            });
    }   //连接 后台
    //重启或者打开客户端之前的获取数据
    function getSomeData(userId) {
        // console.log("重启或者重新连接");
        $.ajax({
            // url: "/queue/cacheDept?deptId=" + data.deptId,
            url: "/queue/cacheCheckRoom?deptId=" + data.deptId + "&checkRoomId=" + id,
            method: "GET",
            success: function (res) {
                // console.log(res);
                if (res.data.length > 0) {
                    console.log(res.data);
                    data.checkRoomDatas.forEach(function (item1) {
                        //1避免点击查询出现数据重复的bug 2同时清空其他诊室在该诊室显示的数据(减少内存消耗)
                        item1.dataAll.showData = [];
                        item1.dataAll.guoData = [];
                        item1.dataAll.callData = [];
                        item1.zongData = [];
                        if (item1.checkId === userCheckRoomId) {
                            // console.log("==");
                            res.data.forEach(function (item2) {
                                if (item2.checkStatus === 0) {
                                    item1.dataAll.showData.push(item2);
                                }
                                if (item2.checkStatus === 1) {
                                    item1.dataAll.guoData.push(item2)
                                }
                                if (item2.checkStatus === 2) {
                                    item1.dataAll.callData.push(item2)
                                }
                            });
                            //渲染界面
                            htmlCanvas(item1);
                            if (checkRoomIndex === '0') {
                                $(".nav.nav-tabs li").eq(0).click();
                            }
                            if (checkRoomIndex === '1') {
                                $(".nav.nav-tabs li").eq(1).click();
                            }
                            if (checkRoomIndex === '2') {
                                $(".nav.nav-tabs li").eq(2).click();
                            }

                        }
                    });
                }
                else {
                    data.checkRoomDatas.forEach(function (item1) {
                        if (item1.checkId === userCheckRoomId) {
                            htmlCanvas(item1)
                        }
                    })
                }
            }
        });
    }

    //界面渲染函数
    function htmlCanvas(datas) {
        //每次查询完重新渲染页面的保障
        $("#waitTable").html('');
        $("#overTable").html('');
        $("#calledTable").html('');
        datas.dataAll.showData.forEach(function (item) {
            if(item.cliisinpat === '急诊'){
                var tr = "<tr style='background-color: #FF814C;'>" +
                    "<td style='width: 100px;'>" + item.queueId + "</td>" +
                    "<td class='fb' style='width:100px'>" + item.patientName + "</td>" +
                    "<td style='width:50px'>" + sexModify(item.patientSex) + "</td>" +
                    "<td style='width:60px'>" + item.patientAge + "</td>" +
                    "<td style='width:180px'>" + item.registerTime + "</td>" +
                    "<td class='fb'>" + partOfCheck(item.partOfCheck) + "</td>" +
                    "<td class='fb'>" + directionChange(item.direction) + "</td>" +
                    "<td class='fb' style='width: 80px;'>" + item.cliisinpat + "</td>" +
                    "<td style='width: 100px;'>" + statusFilter(item.checkStatus) + "</td>" +
                    "</tr>";

            }
                else{
                var tr = "<tr>" +
                    "<td style='width: 100px;'>" + item.queueId + "</td>" +
                    "<td class='fb' style='width:100px'>" + item.patientName + "</td>" +
                    "<td style='width:50px'>" + sexModify(item.patientSex) + "</td>" +
                    "<td style='width:60px'>" + item.patientAge + "</td>" +
                    "<td style='width:180px'>" + item.registerTime + "</td>" +
                    "<td class='fb'>" + partOfCheck(item.partOfCheck) + "</td>" +
                    "<td class='fb'>" + directionChange(item.direction) + "</td>" +
                    "<td class='fb' style='width: 80px;'>" + item.cliisinpat + "</td>" +
                    "<td style='width: 100px;'>" + statusFilter(item.checkStatus) + "</td>" +
                    "</tr>";
            }
            $("#waitTable").append(tr);

        });
        datas.dataAll.guoData.forEach(function (item) {
            var tr = "<tr>" +
                "<td style='width: 100px;'>" + item.queueId + "</td>" +
                "<td class='fb' style='width:100px'>" + item.patientName + "</td>" +
                "<td style='width:50px'>" + sexModify(item.patientSex) + "</td>" +
                "<td style='width:60px'>" + item.patientAge + "</td>" +
                "<td style='width:180px'>" + item.registerTime + "</td>" +
                "<td class='fb'>" + partOfCheck(item.partOfCheck) + "</td>" +
                "<td class='fb'>" + directionChange(item.direction) + "</td>" +
                "<td class='fb' style='width: 80px;'>" + item.cliisinpat + "</td>" +
                "<td style='width: 100px;'>" + statusFilter(item.checkStatus) + "</td>" +
                "</tr>";
            $("#overTable").append(tr);
        });
        datas.dataAll.callData.forEach(function (item) {
            var tr = "<tr>" +
                "<td style='width: 100px;'>" + item.queueId + "</td>" +
                "<td class='fb' style='width:100px'>" + item.patientName + "</td>" +
                "<td style='width:50px'>" + sexModify(item.patientSex) + "</td>" +
                "<td style='width:60px'>" + item.patientAge + "</td>" +
                "<td style='width:180px'>" + item.registerTime + "</td>" +
                "<td class='fb'>" + partOfCheck(item.partOfCheck) + "</td>" +
                "<td class='fb'>" + directionChange(item.direction) + "</td>" +
                "<td class='fb' style='width: 80px;'>" + item.cliisinpat + "</td>" +
                "<td style='width: 100px;'>" + statusFilter(item.checkStatus) + "</td>" +
                "</tr>";
            $("#calledTable").append(tr);
        });
    }

    //检查部位
    function partOfCheck(partOfCheck) {
        if (!partOfCheck) {
            return ''
        }
        return partOfCheck.split(",").join("<br/>");
    }

    //检查部位
    function directionChange(direction) {
        if (!direction) {
            return ''
        }
        return direction.split(",").join("<br/>");
    }

    //状态过滤器 数字===>中文
    function statusFilter(status) {
        if (status === 0) {
            return "等待检查"
        }
        else if (status === 1) {
            return "已过号"
        }
        else if (status === 2) return "已检查";
        else return "正在检查"
    }

    //显示的具体患者的操作函数
    function showPerson(obj) {

        $("#queueId").html(obj.queueId);
        $("#checkStatus").html(statusFilter(obj.checkStatus));
        $("#patientName").html(obj.patientName);
        $("#waitPersonNumber").html("当前等待人数: " + obj.waitPatientNumber)
    }

    //性别操作函数
    function sexModify(sex) {
        if (!sex) {
            return ""
        }
        return sex
    }

    //患者来源操作函数
    function cliisinpat(source) {
        if (!source) {
            return ""
        }
        return source
    }

    //双击表格中的行数选中当前行的信息,并在界面右侧显示出来
    $(".tbody").on("dblclick", "tr", function () {
        $(this).css("backgroundColor", "skyblue");
        jizheneCChangeColor($(this).siblings());
        //当前选中的患者的id
        var queueId = this.children[0].innerHTML;
        //选择的数据在未呼表格中
        if (checkRoomIndex === "0") {
            data.checkRoomDatas.forEach(function (item1) {
                if (item1.checkId === userCheckRoomId) {
                    item1.dataAll.showData.forEach(function (item2) {
                        if (item2.queueId === queueId) {
                            // personObj = item2;
                            //重新患者的详细信息
                            showPerson(item2);
                            //判断当前患者是否被点击过
                            btnCallHtml(item2);
                            // if (item2.clickFlag) {
                            //     //被点击过并且倒计时没有走完
                            //     if (timerDao) {
                            //         // $("#call").prop("disabled",true);
                            //     }
                            //     //被点击过并且倒计时走完
                            //     else {
                            //         // $("#call").prop("disabled",false);
                            //     }
                            //     // $("#over").prop("disabled",false);
                            //     // $("#finish").prop("disabled",false);
                            // }
                            // else {
                            //     //没有被点击过并且倒计时没有走完
                            //     if (timerDao) {
                            //         // $("#call").prop("disabled",true);
                            //         // $("#over").prop("disabled",true);
                            //         // $("#finish").prop("disabled",true);
                            //     }
                            //     //没有被点击过并且倒计时走完
                            //     else {
                            //         // $("#call").prop("disabled",false);
                            //         // $("#over").prop("disabled",true);
                            //         // $("#finish").prop("disabled",true);
                            //     }
                            // }
                        }
                    })
                }
            });

            //在呼叫的基础上,可以进行再次呼叫
        }
        //选择的数据在过号表格中
        if (checkRoomIndex === "1") {
            data.checkRoomDatas.forEach(function (item1) {
                if (item1.checkId === userCheckRoomId) {
                    item1.dataAll.guoData.forEach(function (item2) {
                        if (item2.queueId === queueId) {
                            // personObj = item2;
                            //重新患者的详细信息
                            showPerson(item2);
                            //判断当前患者是否被点击过
                            $("#call").html("重呼");
                        }
                    })
                }
            });
            //倒计时没有走完
            // if (timerDao) {
            // $("#call").prop("disabled",true);
            // $("#finish").prop("disabled",true);
            // }
            // else {
            // $("#call").prop("disabled",false);
            // $("#finish").prop("disabled",false);
            // }
            // $("#over").prop("disabled",true);
        }
        //选择的数据在已呼表格中
        if (checkRoomIndex === "2") {
            data.checkRoomDatas.forEach(function (item1) {
                if (item1.checkId === userCheckRoomId) {
                    item1.dataAll.callData.forEach(function (item2) {
                        if (item2.queueId === queueId) {
                            // personObj = item2;
                            //重新患者的详细信息
                            showPerson(item2);
                            //判断当前患者是否被点击过
                            $("#call").html("重呼");
                        }
                    })
                }
            });
            // $("#call").prop("disabled",true);
            // $("#over").prop("disabled",true);
            // $("#finish").prop("disabled",true);
        }
    });

    //单个诊室三种状态互相切换的时候,判断是未呼,已呼,还是过号

    $(".nav.nav-tabs li").click(function () {
        checkRoomIndex = $(this).get()[0].getAttribute("data-index");
        //选择的数据在未呼表格中
        if (checkRoomIndex === "0") {
            //所有按钮都可以用
            $("#call").prop("disabled", false);
            $("#over").prop("disabled", false);
            $("#finish").prop("disabled", false);

            if (data.checkRoomDatas) {
                data.checkRoomDatas.forEach(function (item1) {
                    if (item1.checkId === userCheckRoomId) {
                        if (item1.dataAll.showData[0]) {
                            // 重新显示当前患者信息;
                            showPerson(item1.dataAll.showData[0]);
                            $("#waitTable tr").eq(0).css("backgroundColor", "skyblue");
                            jizheneCChangeColor($("#waitTable tr").eq(0).siblings());
                            //判断当前患者是否被点击过
                            btnCallHtml(item1.dataAll.showData[0]);
                        }
                        else {
                            $("#queueId").html("");
                            $("#patientName").html("");
                            $("#checkStatus").html("");
                            $("#waitPersonNumber").html("");
                            $("#call").html("呼叫");
                        }
                    }
                });
            }
            //在呼叫的基础上,可以进行再次呼叫
        }
        //选择的数据在过号表格中
        if (checkRoomIndex === "1") {
            $("#call").html("重呼");
            //禁用过号按钮
            $("#call").prop("disabled", false);
            $("#over").prop("disabled", true);
            $("#finish").prop("disabled", false);

            $("#overTable tr").css("backgroundColor", "transparent");
            if (data.checkRoomDatas) {
                data.checkRoomDatas.forEach(function (item1) {
                    if (item1.checkId === userCheckRoomId) {
                        $("#queueId").html("");
                        $("#patientName").html("");
                        $("#checkStatus").html("");
                        $("#waitPersonNumber").html("");
                    }
                });
            }
            ;
        }
        //选择的数据在已呼表格中
        if (checkRoomIndex === "2") {
            $("#call").html("呼叫");
            //只能呼号
            $("#call").prop("disabled", false);
            $("#over").prop("disabled", true);
            $("#finish").prop("disabled", true);

            $("#calledTable tr").css("backgroundColor", "transparent");
            if (data.checkRoomDatas) {
                data.checkRoomDatas.forEach(function (item1) {
                    if (item1.checkId === userCheckRoomId) {
                        $("#queueId").html("");
                        $("#patientName").html("");
                        $("#checkStatus").html("");
                        $("#waitPersonNumber").html("");

                    }
                });
            }
        }
    });

    //点击呼号按钮进行操作函数
    $("#call").click(function () {
        //当前有具体显示的患者
        if ($("#queueId").html()) {
            //把当前患者设置为已点击过状态
            data.checkRoomDatas.forEach(function (item1) {
                if (item1.checkId === userCheckRoomId) {
                    item1.dataAll.showData.forEach(function (item2) {
                        if (item2.queueId === $("#queueId").html()) {
                            item2.clickFlag = true;
                            //改变显示按钮的文字
                            btnCallHtml(item2);
                            //改变当前患者的状态
                            item2.checkStatus = 3;
                            //重新渲染页面
                            htmlCanvas(item1);
                            $("#waitTable tr").get().forEach(function (t) {
                                if ($(t).find("td").eq(0).html() === item2.queueId) {
                                    $(t).css("backgroundColor", "skyblue");
                                }
                            });
                            //重新显示患者信息
                            showPerson(item2);
                            //向后台发送数据
                            myAjax(item2.departmentId, userCheckRoomId, data.checkRoom, item2.queueId, item2.patientName, "call");
                        }
                    });
                    item1.dataAll.guoData.forEach(function (item2) {
                        if (item2.queueId === $("#queueId").html()) {
                            item2.clickFlag = true;
                            //改变显示按钮的文字
                            btnCallHtml(item2);
                            //改变当前患者的状态
                            item2.checkStatus = 3;
                            //重新显示患者信息
                            showPerson(item2);
                            //重新渲染页面
                            htmlCanvas(item1);
                            $("#overTable tr").get().forEach(function (t) {
                                if ($(t).find("td").eq(0).html() === item2.queueId) {
                                    $(t).css("backgroundColor", "skyblue");
                                }
                            });
                            //向后台发送数据
                            myAjax(item2.departmentId, userCheckRoomId, data.checkRoom, item2.queueId, item2.patientName, "call");
                        }
                    })
                    item1.dataAll.callData.forEach(function (item3) {
                        if (item3.queueId === $("#queueId").html()) {
                            item3.clickFlag = true;
                            //改变显示按钮的文字
                            btnCallHtml(item3);
                            //改变当前患者的状态
//                          item3.checkStatus = 3;
                            //重新显示患者信息
                            showPerson(item3);
                            //重新渲染页面
                            htmlCanvas(item1);
                            //向后台发送数据
                            $("#calledTable tr").get().forEach(function (t) {
                                if ($(t).find("td").eq(0).html() === item3.queueId) {
                                    $(t).css("backgroundColor", "skyblue");
                                }
                            });
                            myAjax(item3.departmentId, userCheckRoomId, data.checkRoom, item3.queueId, item3.patientName, "call");
                        }
                    })
                }
            });

        }
        //没有具体的患者return
        else return false

    });
    //点击过号按钮操作的函数
    $("#over").click(function () {
        $("#call").html("呼号");
        if ($("#queueId").html()) {
            //在待呼表格中删除对应的数据
            data.checkRoomDatas.forEach(function (item1) {
                if (item1.checkId === userCheckRoomId) {
                    item1.dataAll.showData.forEach(function (item2, index) {
                        if (item2.queueId === $("#queueId").html()) {
                            //把过号信息加入过号表格中去
                            item1.dataAll.guoData.push(item2);
                            //在待呼表格中删除对应的数据
                            item1.dataAll.showData.splice(index, 1);
                            //向后台发送数据
                            myAjaxGuo(item2.departmentId, item2.checkId, item2.queueId, item2.inspectId, "pass");
                            //改变当前患者的状态
                            item2.checkStatus = 1;
                            //重新渲染页面
                            htmlCanvas(item1);
                            //如果待呼表格中还存在数据,就显示第一条数据
                            if (item1.dataAll.showData[0]) {
                                $("#queueId").html(item1.dataAll.showData[0].queueId);
                                $("#patientName").html(item1.dataAll.showData[0].patientName);
                                $("#checkStatus").html(statusFilter(item1.dataAll.showData[0].checkStatus));
                                $("#waitPersonNumber").html(item1.dataAll.showData[0].waitPersonNumber);
                                //选中第一个,设置背景色
                                $("#waitTable tr").eq(0).css("backgroundColor", "skyblue");
                                jizheneCChangeColor($("#waitTable tr").eq(0).siblings());
                            }
                            else {
                                $("#queueId").html('');
                                $("#patientName").html('');
                                $("#checkStatus").html('');
                                $("#waitPersonNumber").html('');
                            }


                        }
                    })
                }
            });
        }
        else return false;
    });
    //点击检查完毕按钮操作函数
    $("#finish").click(function () {
        if ($("#queueId").html()) {
            data.checkRoomDatas.forEach(function (item1) {
                if (item1.checkId === userCheckRoomId) {
                    item1.dataAll.showData.forEach(function (item2, index) {
                        if (item2.queueId === $("#queueId").html()) {
                            //把当前检查完毕信息加入已检查表格中去
                            item1.dataAll.callData.push(item2);
                            //在待呼表格中删除对应的数据
                            item1.dataAll.showData.splice(index, 1);
                            item2.checkStatus = 2;
                            //重新渲染页面
                            htmlCanvas(item1);
                            //向后台发送数据
                            myAjaxGuo(item2.departmentId, item2.checkId, item2.queueId, item2.inspectId, "finish");
                            //如果待呼表格中还存在数据,就显示第一条数据
                            if (item1.dataAll.showData[0]) {
                                $("#queueId").html(item1.dataAll.showData[0].queueId);
                                $("#patientName").html(item1.dataAll.showData[0].patientName);
                                $("#checkStatus").html(statusFilter(item1.dataAll.showData[0].checkStatus));
                                $("#waitPersonNumber").html(item1.dataAll.showData[0].waitPersonNumber);
                                btnCallHtml(item1.dataAll.showData[0]);
                                //选中第一个,设置背景色
                                $("#waitTable tr").eq(0).css("backgroundColor", "skyblue");
                                jizheneCChangeColor($("#waitTable tr").eq(0).siblings());
                            }
                            else {
                                $("#queueId").html('');
                                $("#patientName").html('');
                                $("#checkStatus").html('');
                                $("#waitPersonNumber").html('');
                            }
                        }
                    });
                    item1.dataAll.guoData.forEach(function (item2, index) {
                        if (item2.queueId === $("#queueId").html()) {
                            //把过号信息加入已检查表格中去
                            item1.dataAll.callData.push(item2);
                            //在待呼表格中删除对应的数据
                            item1.dataAll.guoData.splice(index, 1);
                            item2.checkStatus = 2;
                            //重新渲染页面
                            htmlCanvas(item1);
                            //向后台发送数据
                            myAjaxGuo(item2.departmentId, item2.checkId, item2.queueId, item2.inspectId, "finish");
                            //如果待呼表格中还存在数据,就显示第一条数据
                            if (item1.dataAll.guoData[0]) {
                                $("#queueId").html(item1.dataAll.guoData[0].queueId);
                                $("#patientName").html(item1.dataAll.guoData[0].patientName);
                                $("#checkStatus").html(statusFilter(item1.dataAll.showData[0].checkStatus));
                                $("#waitPersonNumber").html(item1.dataAll.guoData[0].waitPersonNumber);
                                btnCallHtml(item1.dataAll.guoData[0]);
                            }
                            else {
                                $("#queueId").html('');
                                $("#patientName").html('');
                                $("#checkStatus").html('');
                                $("#waitPersonNumber").html('');
                            }
                        }
                    })
                }
            });
        }
        else return false;
    });

    function myAjaxGuo(deptId, checkRoomId, queueId, inspectId, action) {
        $.ajax(
            {
                url: "/zd-server/" + action,
                data: {
                    deptId: deptId,
                    checkRoomId: checkRoomId,
                    queueId: queueId,
                    inspectId: inspectId
                },
                method: "GET",
                success: function (res) {
                    // console.log(res);
                }
            }
        );
    }

    function myAjax(deptId, checkRoomId, checkRoom, queueId, patientName, action) {
        $.ajax(
            {
                url: "/zd-server/" + action,
                data: {
                    deptId: deptId,
                    checkRoomId: checkRoomId,
                    checkRoom: checkRoom,
                    queueId: queueId,
                    patientName: patientName
                },
                method: "GET",
                success: function (res) {
                    // console.log(res);
                }
            }
        );
    }

    //呼叫按钮显示呼叫还是重复的操作函数 判断当前患者是否被呼叫过
    function btnCallHtml(personObj) {
        // console.log("判断:" + personObj.clickFlag);
        if (personObj.clickFlag) {
            $("#call").html("重呼");
        }
        else $("#call").html("呼号");
    }
    //急诊颜色变化
    function jizheneCChangeColor(data){
        $.each(data,function (index,item) {
           if(checkRoomIndex === '0'){
               if(($(item).find("td").eq(7).html())==='急诊'){
                   $(item).css("backgroundColor","#FF814C")
               }
               else {
                   $(item).css("backgroundColor", "transparent")
               }
           }
           else  $(item).css("backgroundColor", "transparent");
        })
    }
    //查询数据
    $("#btnSearch").click(function () {
        var queueId = $("#search").val().trim();
        if (queueId) {
            if (checkRoomIndex === "0") {
                $("#waitTable tr").css("backgroundColor", "transparent");
                data.checkRoomDatas.forEach(function (item1) {
                    if (item1.checkId = userCheckRoomId) {
                        item1.dataAll.showData.forEach(function (item2) {
                            if (item2.queueId.indexOf(queueId) > -1 || item2.patientName.indexOf(queueId) > -1) {

                                $("#waitTable tr").get().forEach(function (item3) {

                                    if ($(item3).children().eq(0).html() === item2.queueId) {

                                        $(item3).css("backgroundColor", "orange");
                                    }
                                })
                            }
                        })
                    }
                })
            }
            if (checkRoomIndex === "1") {
                $("#overTable tr").css("backgroundColor", "transparent");
                data.checkRoomDatas.forEach(function (item1) {
                    if (item1.checkRoomId = userCheckRoomId) {
                        item1.dataAll.guoData.forEach(function (item2) {

                            if (item2.queueId.indexOf(queueId) > -1 || item2.patientName.indexOf(queueId) > -1) {
                                $("#overTable tr").get().forEach(function (item3) {

                                    if ($(item3).children().eq(0).html() === item2.queueId) {

                                        $(item3).css("backgroundColor", "orange");
                                    }
                                })
                            }
                        })
                    }
                })
            }
            if (checkRoomIndex === "2") {
                $("#calledTable tr").css("backgroundColor", "transparent");
                data.checkRoomDatas.forEach(function (item1) {
                    if (item1.checkRoomId = userCheckRoomId) {
                        item1.dataAll.callData.forEach(function (item2) {

                            if (item2.queueId.indexOf(queueId) > -1 || item2.patientName.indexOf(queueId) > -1) {
                                $("#calledTable tr").get().forEach(function (item3) {

                                    if ($(item3).children().eq(0).html() === item2.queueId) {

                                        $(item3).css("backgroundColor", "orange");
                                    }
                                })
                            }
                        })
                    }
                })
            }
        }
        else return false
    })
</script>
</body>
</html>